<template>
  <div class="margin30 line-height40">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick" @edit="handleTabsEdit">
      <div class="fr marginT10">
        <el-button type="primary" plain @click="add">添加维度</el-button>
      </div>
      <el-tab-pane label="用户管理" closable name="first">用户管理

      </el-tab-pane>
      <el-tab-pane label="配置管理" closable name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" closable name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" closable name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>-->

    <!-- <div>
      <span>关联分类</span>
      <el-switch v-model="value1" />
    </div>-->
    <div class="groupList-box">
      <div class="groupList">
        <ul>
          <li
            v-for="(item, index) in groupList"
            :key="index"
            :class="index === groupActive ? 'active' : ''"
          >
            <span
              class="line-height30"
              :title="item.groupName"
              @click="groupSwitch(item, index)"
            >{{ item.groupName }}</span>

            <i
              v-if="index === groupActive"
              class="el-icon-close icon icon-del line-height30"
              @click="groupDel(item, index)"
            />
            <i
              v-if="index === groupActive"
              class="el-icon-edit icon icon-edit"
              @click="groupEdit(item, index)"
            />
          </li>
        </ul>
      </div>
      <div class="btn">
        <el-button type="primary" plain @click="addGroup">添加维度</el-button>
      </div>
    </div>

    <category
      class="marginT40"
      :list="[]"
      biz-type-enum="COLUMN"
      :gutter="20"
      :param="params"
      @Callback="categoryCallback"
    />

    <editorTags
      v-if="list"
      :list="list"
      :type-enum="tagsTypeEnum"
      :param="params"
      :is-category="true"
      :tags-biz-enum-type="tagsBizEnum"
    />
  </div>
</template>

<script>
import category from '@/components/Category';
import editorTags from './component/editorTags';

import { findTagsList, findTagsGroup, addTagsGroup, delTagsGroup, updateTagsGroup } from '@/api/section';
export default {
  name: 'Research',
  components: { category, editorTags },
  data () {
    return {
      list: null,
      params: {},
      groupList: null,
      groupActive: 0,
      groupId: null,
      tagsTypeEnum: 'CATEGORY_TAGS',
      tagsKindEnum: 'TEACHINGRESEARCH',
      tagsBizEnum: 'TEACHINGRESEARCH'
    };
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      findTagsGroup({
        kindEnum: this.tagsKindEnum
      }).then(res => {
        this.groupList = res.data;
        this.groupId = res.data[0].groupId;
      });
    },
    groupSwitch (item, index) {
      this.groupActive = index;
      this.groupId = item.groupId;
      this.params.groupId = item.groupId;
      this.$set(this.params, 'groupId', item.groupId);
      if (this.params.growthClassify && this.params.stageId && this.params.subjectId) {
        var params = JSON.parse(JSON.stringify(this.params));
        params.stageId = JSON.parse(JSON.stringify(this.params.stageId[0]));
        params.subjectId = JSON.parse(JSON.stringify(this.params.subjectId[0]));
        this.getFindColumnTags(params);
      }
    },
    addGroup () {
      this.$prompt('', '添加', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '标签维度不能为空'
      }).then(({ value }) => {
        addTagsGroup({
          groupName: value,
          tagsBizTypeEnum: this.tagsKindEnum
        }).then(res => {
          this.groupList.push({
            groupId: res.data,
            groupName: value
          });
          this.$message({
            type: 'success',
            message: '添加成功'
          });
        });
      }).catch(() => {
        // 取消操作
        console.log('cancel');
      });
    },
    groupEdit (item, index) {
      this.$prompt('', '编辑', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: item.groupName,
        inputPattern: /\S/,
        inputErrorMessage: '标签维度不能为空'
      }).then(({ value }) => {
        updateTagsGroup({
          groupId: item.groupId,
          newGroupName: value,
          tagsBizTypeEnum: this.tagsKindEnum
        }).then(res => {
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          this.groupList.splice(index, 1, {
            groupId: item.groupId,
            groupName: value
          });
        });
      }).catch(() => {
        // 取消操作
        console.log('cancel');
      });
    },
    groupDel (item, index) {
      const msg = '确认是否删除该维度！';
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delTagsGroup(item.groupId).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.groupList.splice(index, 1);
          });
        })
        .catch(() => {
          // 取消操作
          console.log('cancel');
        });
    },
    categoryCallback (obj) {
      this.params = {
        groupId: this.groupId,
        growthClassify: obj.GROWTH_CLASSIFY.itemCode || null,
        stageId: obj.STAGE && obj.STAGE.itemCode ? [obj.STAGE.itemCode] : null,
        subjectId: obj.SUBJECT && obj.SUBJECT.itemCode ? [obj.SUBJECT.itemCode] : null,
        tagsKindEnum: this.tagsKindEnum,
        tagsTypeEnum: this.tagsTypeEnum
      };
      var params = JSON.parse(JSON.stringify(this.params));
      params.stageId = JSON.parse(JSON.stringify(this.params.stageId[0]));
      params.subjectId = JSON.parse(JSON.stringify(this.params.subjectId[0]));

      this.getFindColumnTags(params);
    },

    getFindColumnTags (params) {
      findTagsList(params).then(res => {
        console.log('教研:', res.data);
        this.list = res.data;
      });
    }

  }
};
</script>

<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 10px;
}
.tags-box {
  height: 240px;
  overflow-y: auto;
  .tags-item {
    display: flex;
    padding: 0 15px;
    cursor: pointer;
    .checkbox {
    }
    .name {
      flex: 1;
    }
    .text-box {
      width: 120px;
    }
  }
  li.active {
    background: #c0d8fb;
  }
}
.btn-box {
  display: flex;
  .el-button {
    flex: 1;
  }
}

.groupList-box {
  display: flex;
  justify-content: space-between;
  .groupList {
    overflow-x: auto;
    flex: 1;
    ul {
      display: flex;
      li {
        position: relative;
        padding-right: 6%;
        span {
          cursor: pointer;
          display: inline-block;
        }
        .icon {
          display: inline-block;
          cursor: pointer;
          font-size: 18px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          color: #1e87f0;
        }
        .icon-del {
          right: 0;
        }
        .icon-edit {
          right: 30px;
        }
        .icon-del:not(:first-child) {
        }
        .icon-del:hover,
        .icon-edit:hover {
          color: red;
        }
      }
      li.active {
        border-bottom: 3px solid #1e87f0;
        color: #1e87f0;
      }
      li:not(:first-child) {
        margin-left: 2%;
      }
    }
  }
  .btn {
  }
}
</style>
